<template>
    <div class="card-container">
        <lay-card>
            <lay-breadcrumb>
                <lay-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index">
                    {{ breadcrumb.title }}
                </lay-breadcrumb-item>
            </lay-breadcrumb>
            {{txt}}
        </lay-card>
      </div>
</template>

<script lang="ts">
export default {
    name: "GlobalBreadcrumb",
    props:{
        txt:String
    }
}
</script>

<script lang="ts" setup>
import { computed, reactive } from "vue";
import { useRoute } from "vue-router";
import { getParents } from "../../library/treeUtil";
import { menus } from "../composable/menu";

const menusData = computed(() => menus);
const route = useRoute();
const breadcrumbs = computed(() => getParents(menusData.value, route.path)?.reverse());

</script>
<style>
    .card-container {
      background: whitesmoke;
      padding: 10px 10px 0px 10px;
    }
    </style>
